<template>
  <div>
    <div class="swiper">
      <swiper
        :indicator-dots="true"
        :autoplay="false"
        easing-function="easeOutCubic"
        @change="swiperChnage"
        :current="current"
        :circular="true"
      >
        <swiper-item v-for="(item,index) in swiperList" :key="index">
          <img :src="item" mode="scaleToFill" />
        </swiper-item>
      </swiper>
      <!-- <div class="mb">
        <div>
          <span>{{form.saleNum}}</span>
          <p>累计销量</p>
        </div>
      </div>-->
    </div>
    <div class="content">
      <div class="name">{{form.goodsName}}</div>
      <div class="shopMoney" v-if="shopType === 'dis'">
        <span>零售价￥{{form.goodsDiscount}}</span>
        <p>{{form.goodsAmount}}</p>
      </div>
      <div class="numInfo">
        <span v-if="shopType === 'dis'">赚￥{{form.disAmount}}</span>
        <span v-else>￥{{form.stockSupplyCost ? form.stockSupplyCost : 0}}</span>
        <!-- // to do 同步安卓 -->
        <p>库存&nbsp;{{form.stockSupplyNum}}</p> 
        <!-- <p>库存&nbsp;{{form.goodsStock}}</p> -->
      </div>

      <!-- <div class="shopName">{{form.shopName}}</div> -->
      <div class="stockBox" v-if="shopType !== 'dis'">
        <span>赊货锁额({{form.stockCreditPre}})%</span>
        <p>￥{{form.stockSupplyCost ? form.stockSupplyCost * form.stockCreditPre * 0.01 : 0}}</p>
      </div>
      <div class="shopEvaluate">
        <!-- <p>商品评价&nbsp;({{}})</p> -->
        <p>商品评价&nbsp;(0)</p>
        <!-- <span>更多&nbsp;></span> -->
      </div>
      <div class="shopInfoTitle">商品详情</div>
      <img
        v-for="(item,index) in showImgList"
        :key="index"
        :src="item"
        mode="widthFix"
      />
      <div class="kong"></div>
    </div>
    <AlertBox :dateInfo="dateInfo" @change="AlertBoxChange" :isAlert="isAlert"></AlertBox>
    <button class="btn" v-if="shopType === 'dis'" @click="disMoneyClick">分销赚钱</button>
    <button class="stockBtn" v-else @click="stockClick">进货</button>
  </div>
</template>

<script>
import AlertBox from '@/components/AlertBox'
import {
  FIND_SHOP_GOODS_INFO,
  CREATE_GOODS_DIS_API,
  FIND_STOCK_GOODS_INFO
} from '@/api'
import { getCurrentPageParams } from '@/utils'

export default {
  components: { AlertBox },
  props: {},
  data () {
    return {
      form: {
        saleNum: 0
      },
      swiperList: [],
      showImgList: [],
      dateInfo: {},
      isAlert: false,
      shopType: 'dis'
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.shopType = getCurrentPageParams('type')
    if (getCurrentPageParams('type') === 'dis') {
      this.getDisShopInfo()
    } else {
      this.getStockGoodsInfo()
    }
    this.isAlert = false
  },
  methods: {
    disMoneyClick () {
      const vm = this
      // wx.showModal({
      //   title: `可赚钱佣金：￥${vm.form.disAmount}`,
      //   content: `供货价：￥${vm.form.goodsDiscount}`,
      //   showCancel: true,
      //   confirmText: '确定',
      //   confirmColor: '#5d93fd',
      //   success: function (res) {
      //     if (res.confirm) {
      vm.createGoodsShop()
      //     } else if (res.cancel) {
      //     }
      //   }
      // })
    },
    stockClick () {
      const vm = this
      let item = JSON.stringify(vm.form)
      // vm.$cookie.set('testForm', vm.form) // 这个是测试用的
      vm.$router.push(
        `/pages/data-analyze/stock/set-stock-info/main?item=${item}`
      )
    }, // 分销一键进货
    createGoodsShop () {
      const vm = this
      CREATE_GOODS_DIS_API(vm.$store.state.account.shopId, vm.form.goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            // vm.$alert('添加成功', '').then(() => {})
            vm.dateInfo = {
              src:
                'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/fenxiaocheng.png',
              title: '',
              label: '分销成功'
            }
            vm.isAlert = true
          } else if (r.data.code === 'GOODS-DIS-HAS-EXIST') {
            vm.dateInfo = {
              src:
                'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/fenxiaocheng.png',
              title: '提示',
              label: '此商品已分销，您可在我的分销中查看'
            }
            vm.isAlert = true
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    AlertBoxChange (val) {
      this.isAlert = val
    },
    getDisShopInfo () {
      const vm = this
      vm.swiperList = []
      vm.showImgList = []
      FIND_SHOP_GOODS_INFO(getCurrentPageParams('goodsNo'))
        .then(r => {
          if (r.data.code === '0') {
            let data = r.data.data
            // let leng = 4
            // let cont = 1
            // for (let i = 0; i < leng; i++) {
            //   console.log(data.img + cont)
            //   vm.swiperList.push(`${data.img}${cont}`)
            //   cont++
            // }
            let list1 = []
            let list2 = []
            vm.form = data
            list1.push(data.goodsImg)
            list1.push(data.img1)
            list1.push(data.img2)
            list1.push(data.img3)
            list1.push(data.img4)
            list2.push(data.describeImg1)
            list2.push(data.describeImg2)
            list2.push(data.describeImg3)

            vm.swiperList = list1.filter(s => {
              return s && s.trim()
            })
            vm.showImgList = list2.filter(s => {
              return s && s.trim()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    },
    getStockGoodsInfo () {
      const vm = this
      vm.swiperList = []
      vm.showImgList = []
      FIND_STOCK_GOODS_INFO(getCurrentPageParams('goodsNo'))
        .then(r => {
          if (r.data.code === '0') {
            let data = r.data.data
            let list1 = []
            let list2 = []
            vm.form = data
            list1.push(data.goodsImg)
            list1.push(data.img1)
            list1.push(data.img2)
            list1.push(data.img3)
            list1.push(data.img4)
            list2.push(data.describeImg1)
            list2.push(data.describeImg2)
            list2.push(data.describeImg3)

            vm.swiperList = list1.filter(s => {
              return s && s.trim()
            })
            vm.showImgList = list2.filter(s => {
              return s && s.trim()
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.swiper {
  position: relative;
  swiper {
    // height: 270px;
    height: 400px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .mb {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #000;
    opacity: 0.8;
    color: #fff;
    font-size: 14px;
    height: 60px;
    div {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
.content {
  width: 95%;
  margin: auto;
  .name {
    font-size: 14px;
    margin-top: 10px;
    color: #000;
    font-weight: 600;
  }
  .shopMoney {
    height: 35px;
    display: flex;
    align-items: center;
    color: #ccc;
    span {
      color: #000;
      font-size: 13px;
    }
    p {
      font-size: 12px;
      margin-left: 15px;
      text-decoration: line-through;
      color: #4a4a4a;
    }
  }
  .numInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 16px;
      color: red;
    }
    p {
      font-size: 14px;
      color: #4a4a4a;
    }
  }
  .stockBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin: 20px 0 15px;
    span {
      color: #000;
    }
    p {
      color: #6c6c6c;
    }
  }
  .shopName {
    font-size: 14px;
    color: #000;
    line-height: 80px;
    margin-left: 40px;
  }
  .shopEvaluate {
    height: 25px;
    font-size: 13px;
    line-height: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #4a4a4a;
    margin: 20px 0 15px;
    span {
      color: blue;
    }
  }
  .shopInfoTitle {
    font-size: 14px;
    color: #000;
    line-height: 40px;
  }
  img {
    width: 100%;
  }
  .kong {
    height: 45px;
  }
}
.btn {
  width: 100%;
  height: 45px;
  background: #5e6dfb;
  font-size: 14px;
  color: #fff;
  line-height: 45px;
  position: fixed;
  bottom: 0;
  border-radius: 0;
}
.stockBtn {
  width: 100%;
  height: 45px;
  font-size: 14px;
  color: #fff;
  line-height: 45px;
  position: fixed;
  bottom: 0;
  border-radius: 0;
  background: linear-gradient(to right, $new-red-dark, $new-red-tint);
}
</style>
